<template>
	<div class="accountBlance">
		<el-card>
			<div>
				<span>可用现金余额：</span>
				<span class="available_amount">¥{{availableAmount}}</span>
			</div>
			<div style="padding-top: 25px;">
				<el-button type="primary" @click="tixian">提现</el-button>
			</div>
		</el-card>
		<el-card class="m-t">
			<div>
				<span>糖果余额：</span>
				<span class="available_amount">{{sweet}}</span>
			</div>
			<div style="padding-top: 25px;">
				<el-button type="primary" @click="sweetDialogVisible = true">划转</el-button>
			</div>
		</el-card>

		<el-dialog title="糖果划转" :visible.sync="sweetDialogVisible" width="30%">
			<sweet-change v-if="sweetDialogVisible" @success="changeSuccess"></sweet-change>
		</el-dialog>

		<el-card class="m-t">
			<div>
				<span>金豆余额：</span>
				<span class="available_amount">{{goldenBean}}</span>
			</div>
			<div style="padding-top: 25px;">
				<el-button type="primary" @click="goldenBeanDialogVisible = true">划转</el-button>
			</div>
		</el-card>

		<el-dialog title="金豆划转" :visible.sync="goldenBeanDialogVisible" width="30%">
			<golden-bean-change v-if="goldenBeanDialogVisible" @success="changeSuccessGoldenBean"></golden-bean-change>
		</el-dialog>
	</div>
</template>

<script>
import sweetChange from './components/sweetChange.vue'
import goldenBeanChange from './components/goldenBeanChange.vue'

	export default {
		components: {
			sweetChange,
			goldenBeanChange
		},
		data() {
			return {
				mid:localStorage.getItem('merchantId'),
				availableAmount: 0,
				sweet: 0,
				sweetDialogVisible: false,
				goldenBean: 0,
				goldenBeanDialogVisible: false
			}
		},
		mounted() {
			this.getBalance();
			this.getSweet()
			this.getGoldenBean()
		},
		methods: {
			changeSuccessGoldenBean() {
				this.goldenBeanDialogVisible = false;
				this.getGoldenBean();
			},
			getGoldenBean() {
				this.$http.get(this.$api.goldenBeanBalance, this.form).then(res => {
					if (res.code == 0) {
						this.goldenBean = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			changeSuccess() {
				this.sweetDialogVisible = false;
				this.getSweet();
			},
			getSweet(){
				this.$http.get(this.$api.sweet+'/'+this.mid).then(res=>{
					this.sweet = res.data.sweetBalance;
					// this.status = res.data.status;
				})
			},
			getBalance() {
				const loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.get(this.$api.merchantBalance, {
					mid: localStorage.getItem('merchantId')
				}).then(res => {
					loading.close();
					this.availableAmount = res.data.availableAmount
				})
			},
			tixian() {
				this.$prompt('请输入提现金额', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$http.post(this.$api.merchantWithdraw, {
						amount: value,
						mid: localStorage.getItem('merchantId')
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '提现成功！'
							});
							this.getBalance();
						} else {
							this.$message({
								type: 'error',
								message: '提现失败！' + res.msg
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消提现'
					});
				});
			}
		}
	}
</script>

<style scoped>
	.accountBlance {
		padding: 15px;
	}

	.available_amount {
		font-size: 24px;
		font-weight: bold;
		color: green;
		font-style: italic;
	}
	.m-t {
		margin-top: 30px;
	}
</style>
